import React from 'react';
import './index.scss'
import { Col, Row, Button } from 'antd';
import { useLocation } from 'react-router-dom'
export default function Particultext() {
  const {
    // basicId,
    courierNumber,
    // deliveryId,
    // expressCompany,
    franchisee,
    freight,
    goodsName,
    // key,
    mcode,
    memberPhone,
    // orderAmount,
    orderId,
    orderStatus,
    orderTime,
    // orderType,
    payAmount,
    payTime,
    pointDeduction,
    purchaseNum,
    receiver,
    receiverAddress,
    receiverPhone,
    refundAmount,
    refundStatus,
    refundTime,
    remarks,
    returnCompany,
    // returnId,
    returnOrderNo,
    returnTime,
    specialPrice,
    // tradeId,
    unitPrice,
  } = useLocation().state || (JSON.parse((localStorage.getItem('state'))))
  // console.log(state);

  return (
    <div>
      <span className='xiangqing'>订单详情</span>
      <div className='lineItem'>
        {/* //第一个表格 */}
        <div className='heardTop'>
          <Row>
            <Col span={24} style={{ paddingLeft: '30px' }}>基本信息</Col>
          </Row>
        </div>
        <div className='bodyBox'>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>订单号</Col>
            <Col span={7}>{orderId}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>收货人</Col>
            <Col span={7}>{receiver}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>订单状态</Col>
            <Col span={7}>{orderStatus}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>收货人手机号</Col>
            <Col span={7}>{receiverPhone}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>下单时间</Col>
            <Col span={7}>{orderTime}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>收货地址</Col>
            <Col span={7}>{receiverAddress}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>订单类型</Col>
            <Col span={7}>{orderStatus}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>M码</Col>
            <Col span={7}>{mcode}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>订单金额</Col>
            <Col span={7}>{payAmount}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>会员手机号</Col>
            <Col span={7}>{memberPhone}</Col>
          </Row>
        </div>
        {/* //第二个表格 */}
        <div className='heardTop'>
          <Row>
            <Col span={24} style={{ paddingLeft: '30px' }}>交易信息</Col>
          </Row>
        </div>
        <div className='bodyBox'>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>商品名称</Col>
            <Col span={7}>{goodsName}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>单价</Col>
            <Col span={7}>{unitPrice}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>购买数量</Col>
            <Col span={7}>{purchaseNum}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>优惠价</Col>
            <Col span={7}>{specialPrice}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>加盟商</Col>
            <Col span={7}>{franchisee}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>积分抵扣</Col>
            <Col span={7}>{pointDeduction}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>支付时间</Col>
            <Col span={7}>{payTime}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>支付金额</Col>
            <Col span={7}>{payAmount}</Col>
          </Row>
        </div>
        {/* //第三个表格 */}
        <div className='heardTop'>
          <Row>
            <Col span={24} style={{ paddingLeft: '30px' }}>发货信息</Col>
          </Row>
        </div>
        <div className='bodyBox'>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>快递公司</Col>
            <Col span={7}>{returnCompany}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>快递单号</Col>
            <Col span={7}>{courierNumber}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>运费</Col>
            <Col span={7}>{freight}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}></Col>
            <Col span={7}></Col>
          </Row>
        </div>
        {/* //第四个表格 */}
        <div className='heardTop'>
          <Row>
            <Col span={24} style={{ paddingLeft: '30px' }}>退货退款信息</Col>
          </Row>
        </div>
        <div className='bodyBox'>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>订单状态</Col>
            <Col span={7}>{orderStatus}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>退货快递公司</Col>
            <Col span={7}>{returnCompany}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>退货时间</Col>
            <Col span={7}>{returnTime}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>退货单号</Col>
            <Col span={7}>{returnOrderNo}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>退款状态</Col>
            <Col span={7}>{refundStatus}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}>退款金额</Col>
            <Col span={7}>{refundAmount}</Col>
          </Row>
          <Row>
            <Col span={4} style={{ backgroundColor: 'rgb(242,242,242)' }}>退款时间</Col>
            <Col span={7}>{refundTime}</Col>
            <Col span={6} style={{ backgroundColor: 'rgb(242,242,242)' }}></Col>
            <Col span={7}></Col>
          </Row>
        </div>
        {/* //第五个表格 */}
        <div className='heardTop'>
          <Row>
            <Col span={24} style={{ paddingLeft: '30px' }}>客服备注</Col>
          </Row>
        </div>
        <div className='bodyBox'>
          <Row>
            <Col span={24}>
              <textarea defaultValue={remarks}></textarea>
            </Col>
          </Row>
          <div className='buttBox'>
            <div>
              <Button style={{ backgroundColor: 'black', color: 'white' }}>修改备注</Button>
            </div>
            <div>
              <Button style={{ backgroundColor: 'black', color: 'white' }}>发货</Button>
            </div>
            <div>
              <Button style={{ backgroundColor: 'black', color: 'white' }}>发起退货</Button>
            </div>
            <div>
              <Button style={{ backgroundColor: 'black', color: 'white' }}>发起退款</Button>
            </div>
            <div>
              <Button style={{ backgroundColor: 'black', color: 'white' }}>关闭交易</Button>

            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
